<template>
    <draggable v-model="emojiList" :animation="300" :handle="'.mover'" class="emoji-box">
        <transition-group>
            <div class="emoji-item" v-for="(value, key, index) of emojiList" :key="index"
                 @click="addEmoji(key, value)">
                <img :src="value" :title="key" class="emoji mover" width="20" height="20" alt="not found"/>
            </div>
        </transition-group>
    </draggable>
</template>

<script setup lang="ts">
import emojiList from "@/utils/emoji";

const emit = defineEmits(['addEmoji']);

const addEmoji = (key: string, value: string) => {
    emit("addEmoji", key, value);
};

</script>

<style lang="scss" scoped>
.emoji-box {
  position: fixed;
  right: 0;
  bottom: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--box-shadow);
  border-radius: 0.1rem;
  box-shadow: 0 0 0.06rem 0.03rem var(--box-shadow);
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 10;

  .emoji-item {
    width: 0.5rem;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .emoji {
      cursor: pointer;
    }

    &:hover {
      transition: all 0.2s;
      border-radius: 0.2rem;
      background: var(--main-2-h8);
    }
  }
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>